<template>
	<div class="swiper">
		<swiper :options="swiperOption">
    		<swiper-slide v-for="item in swiperList" :key="item.id"> 
    		<img class="swiper-img" :src="item.imgUrl" > </swiper-slide>
    		<div class="swiper-pagination"  slot="pagination"></div>
  		</swiper>
  	</div>

</template>

<script>
 export default{
 	name:'HomeSwiper',
 	data () {
 		return{
 			swiperOption:{
 				pagination:'.swiper-pagination'
 			},
 			swiperList:[{
 				id: '0001',
 				//路径不对加require
 				imgUrl: require('../../../assets/styles/image/tu1.jpg')
 			}, {
				id: '0002',
 				imgUrl: require('../../../assets/styles/image/tu2.jpg')
 			},{
 				id: '0003',
 				imgUrl: require('../../../assets/styles/image/tu3.jpg')
 			},{
 				id: '0004',
 				imgUrl: require('../../../assets/styles/image/tu4.jpg')
 			}]
 		}
 	}
 }
</script>

<style lang="stylus" scoped>
	.swiper  >>>   .swiper-pagination-bullet-active
		background:#eee
	.swiper
		width:100%
		height:0
		padding-bottom:32%
		overflow:hidden
		background:#eee
		.swiper-img
			width:100%
</style>